Time Picker stable

/* KATA Time Picker — two columns, one value. */
.k-tp{position:relative;font-family:var(--k-font);color:var(--k-ink)}
.k-tp .wrap-in{position:relative}
.k-tp-btn{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:28px;height:28px;border:0;border-radius:7px;background:none;color:var(--k-ink-3);display:flex;align-items:center;justify-content:center;cursor:pointer}
.k-tp-btn:hover{background:var(--k-bg-soft);color:var(--k-ink)}
.k-tp-panel{position:absolute;inset-inline-start:0;top:calc(100% + 8px);z-index:50;background:var(--k-bg);border:1px solid var(--k-line);border-radius:14px;box-shadow:0 20px 44px -14px rgba(16,24,40,.22);padding:10px;display:flex;gap:6px}
.k-tp-panel[hidden]{display:none}
.k-tp-col{display:flex;flex-direction:column;gap:2px;max-height:196px;overflow:auto;width:64px;padding-inline-end:2px}
.k-tp-col .hd{font-size:10.5px;font-weight:600;letter-spacing:.08em;color:var(--k-ink-3);text-align:center;padding:3px 0 5px;position:sticky;top:0;background:var(--k-bg)}
.k-tp-opt{padding:7px 0;border:0;border-radius:8px;background:none;font-family:inherit;font-size:13.5px;color:var(--k-ink-2);cursor:pointer;text-align:center}
.k-tp-opt:hover{background:var(--k-bg-soft);color:var(--k-ink)}
.k-tp-opt.sel{background:var(--k-ink);color:var(--k-bg);font-weight:600}

// KATA Time Picker — hours and five-minute steps; typing still works.
document.querySelectorAll('[data-tp]').forEach(function (el) {
  var input = el.querySelector('[data-tp-input]');
  var btn = el.querySelector('[data-tp-btn]');
  var panel = el.querySelector('[data-tp-panel]');
  var hCol = el.querySelector('[data-tp-h]');
  var mCol = el.querySelector('[data-tp-m]');
  function pad(n) { return String(n).padStart(2, '0'); }
  function build(col, values, cur) {
    col.querySelectorAll('.k-tp-opt').forEach(function (o) { o.remove(); });
    values.forEach(function (v) {
      var b = document.createElement('button');
      b.type = 'button'; b.className = 'k-tp-opt' + (v === cur ? ' sel' : ''); b.textContent = v; b.setAttribute('data-v', v);
      col.appendChild(b);
    });
  }
  function render() {
    var m = /^(\d{1,2}):(\d{2})/.exec(input.value || '');
    build(hCol, Array.from({ length: 24 }, function (_, i) { return pad(i); }), m ? pad(+m[1]) : '');
    build(mCol, Array.from({ length: 12 }, function (_, i) { return pad(i * 5); }), m ? m[2] : '');
  }
  function open() { render(); panel.hidden = false; btn.setAttribute('aria-expanded', 'true'); }
  function close() { panel.hidden = true; btn.setAttribute('aria-expanded', 'false'); }
  btn.addEventListener('click', function () { panel.hidden ? open() : close(); });
  input.addEventListener('focus', open);
  panel.addEventListener('click', function (e) {
    var b = e.target.closest('.k-tp-opt'); if (!b) return;
    var m = /^(\d{1,2}):(\d{2})/.exec(input.value || '');
    var h = m ? pad(+m[1]) : '09', min = m ? m[2] : '00';
    if (b.parentElement === hCol) h = b.getAttribute('data-v'); else min = b.getAttribute('data-v');
    input.value = h + ':' + min;
    input.dispatchEvent(new Event('change', { bubbles: true }));
    render();
  });
  document.addEventListener('click', function (e) { if (!el.contains(e.target)) close(); });
  document.addEventListener('keydown', function (e) { if (e.key === 'Escape') close(); });
  render();
});