/* The colour ramp, its band filter and the hover tip. */

.legend { margin-left: auto; display: flex; align-items: center; gap: .4rem; font-size: 10px; color: var(--dim); user-select: none; }
.legend .lab { cursor: pointer; }
.legend .lab:hover { color: var(--ink); text-decoration: underline; }
.legend .ramp { position: relative; display: flex; }
.legend .ramp span { width: 8px; height: 12px; cursor: crosshair; }
.legend .ramp span.off { opacity: .25; }

/* the baseline itself: 32 buckets means the two middle ones meet at the halfway mark */
.legend .ramp::after {
  content: '';
  position: absolute;
  left: 50%; top: -2px; bottom: -2px;
  width: 1px;
  background: var(--ink);
  pointer-events: none;
}

/* the tip is appended to the body, so it cannot be scoped under .legend */
#ramp-tip {
  position: fixed;
  z-index: 20;
  transform: translateX(-50%);
  padding: .3rem .5rem;
  border-radius: 5px;
  background: var(--ink);
  color: #fff;
  font: 10px/1.5 var(--mono);
  white-space: nowrap;
  text-align: center;
  pointer-events: none;
}
#ramp-tip b { font-size: 12px; }