function KpiStrip({ items }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: `repeat(${items.length}, 1fr)`, gap: 0, border: '1px solid var(--ink)', background: 'var(--paper)' }}>
      {items.map((it, i) => (
        <div key={i} className="kpi" style={{ borderRight: i < items.length - 1 ? '1px solid var(--hairline)' : 'none' }}>
          <div className="lbl">{it.label}</div>
          <div className="val">{it.value}</div>
          <div className={'delta ' + (it.dir || '')} style={{ color: it.dir === 'up' ? 'var(--green)' : it.dir === 'dn' ? 'var(--flag)' : 'var(--ink-4)' }}>
            {it.delta}
          </div>
        </div>
      ))}
    </div>
  );
}
window.KpiStrip = KpiStrip;