Transfer stable

/* KATA Transfer — two lists and a shuttle. */
.k-xfer{width:100%;display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:stretch;font-family:var(--k-font);color:var(--k-ink);max-width:560px}
.k-xfer-panel{border:1px solid var(--k-line);border-radius:var(--k-radius-lg);display:flex;flex-direction:column;background:var(--k-bg);min-height:216px}
.k-xfer-h{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--k-line);font-size:12.5px;font-weight:600}
.k-xfer-h .cnt{margin-inline-start:auto;color:var(--k-ink-3);font-weight:500}
.k-xfer-filter{margin:9px 10px 4px}
.k-xfer-list{padding:5px;overflow:auto;display:flex;flex-direction:column;gap:1px}
.k-xfer-it{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:8px;font-size:13px;cursor:pointer}
.k-xfer-it:hover{background:var(--k-bg-soft)}
.k-xfer input[type=checkbox]{accent-color:var(--k-ink);width:15px;height:15px;flex:none;cursor:pointer}
.k-xfer-acts{display:flex;flex-direction:column;gap:8px;justify-content:center}
.k-xfer-acts .btn{padding:0 11px}
@media (max-width:560px){.k-xfer{grid-template-columns:1fr}.k-xfer-acts{flex-direction:row;justify-content:center}}

// KATA Transfer — checked items move; counts and filters stay honest.
document.querySelectorAll('[data-xfer]').forEach(function (root) {
  var sides = { l: root.querySelector('[data-xfer-l]'), r: root.querySelector('[data-xfer-r]') };
  function items(side) { return Array.prototype.slice.call(side.querySelectorAll('.k-xfer-it')); }
  function refresh() {
    Object.keys(sides).forEach(function (k) {
      var s = sides[k], list = items(s);
      var checked = list.filter(function (i) { return i.querySelector('input').checked; }).length;
      s.querySelector('[data-xfer-cnt]').textContent = list.length + ' items';
      var all = s.querySelector('[data-xfer-all]');
      all.checked = list.length > 0 && checked === list.length;
      all.indeterminate = checked > 0 && checked < list.length;
    });
    root.querySelector('[data-xfer-tor]').disabled = !items(sides.l).some(function (i) { return i.querySelector('input').checked; });
    root.querySelector('[data-xfer-tol]').disabled = !items(sides.r).some(function (i) { return i.querySelector('input').checked; });
  }
  function move(from, to) {
    items(from).forEach(function (i) {
      var box = i.querySelector('input');
      if (box.checked) { box.checked = false; to.querySelector('.k-xfer-list').appendChild(i); }
    });
    refresh();
  }
  root.querySelector('[data-xfer-tor]').addEventListener('click', function () { move(sides.l, sides.r); });
  root.querySelector('[data-xfer-tol]').addEventListener('click', function () { move(sides.r, sides.l); });
  Object.keys(sides).forEach(function (k) {
    var s = sides[k];
    s.addEventListener('change', refresh);
    s.querySelector('[data-xfer-all]').addEventListener('change', function (e) {
      items(s).forEach(function (i) { if (i.style.display !== 'none') i.querySelector('input').checked = e.target.checked; });
      refresh();
    });
    s.querySelector('[data-xfer-q]').addEventListener('input', function (e) {
      var q = e.target.value.toLowerCase();
      items(s).forEach(function (i) { i.style.display = i.textContent.toLowerCase().indexOf(q) !== -1 ? '' : 'none'; });
    });
  });
  refresh();
});