/* LP Terminal — liquidity histogram chart (js/chart.js) */

.chart-liq{
  position:relative;
  user-select:none;
  -webkit-user-select:none;
  touch-action:none; /* we own vertical drag = pan */
  border-radius:8px;
}
.chart-liq.dragging{cursor:grabbing}
.chart-liq:not(.dragging){cursor:grab}

.clchrome{
  position:absolute; top:4px; right:6px; z-index:2;
  display:flex; gap:6px; align-items:center;
  pointer-events:none; /* re-enabled on interactive children below */
}
.clchrome > *{pointer-events:auto}

.oor-tag{
  background:#3d1d1f; color:var(--red);
  font:700 10px -apple-system,sans-serif; letter-spacing:.3px;
  padding:2px 7px; border-radius:20px;
}

.follow-pill{
  background:var(--card); color:var(--tx); border:1px solid var(--line);
  font:600 10.5px -apple-system,sans-serif;
  padding:3px 9px; border-radius:20px; cursor:pointer;
}
.follow-pill:hover{background:var(--line)}

.clrows{position:relative}

.clrow{
  display:flex; align-items:center; gap:8px;
  height:20px; line-height:20px;
  padding:0 2px;
  border-left:3px solid transparent;
  transition:background .3s, opacity .3s, border-color .3s;
}

.clrow.dim{opacity:.55}
.clrow.in-ladder{opacity:1; background:rgba(88,166,255,.06); border-left-color:rgba(88,166,255,.35)}
.clrow.ladder-top{border-top:1px solid var(--blu)}
.clrow.ladder-bottom{border-bottom:1px solid var(--blu)}

.clrow.spot{background:rgba(63,185,80,.10)}

.clp{
  width:58px; flex-shrink:0; text-align:right;
  color:var(--dim); font-size:11px;
}

.clbarwrap{flex:1; min-width:0}
.clbar{
  height:14px; background:var(--blu); border-radius:2px; min-width:2px;
  transition:width .6s ease;
}
.clbar.cur{background:var(--grn)}

.cllab{
  color:var(--dim); font-size:11px; white-space:nowrap; flex-shrink:0;
}
.cllab em{color:var(--amb); font-style:normal}
.spot-mark{color:var(--grn); font-weight:700}